<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8"/>
		<title>用户登录</title>
		<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"/>
		<link rel="stylesheet" th:href="@{/css/style.css}"/>
	</head>

	<body>
		<div id="login-container">
			<Card class="login-card">
				<p slot="title">用户登录</p>
				<i-form :model="user" ref="formLogin" :rules="formLogin">
					<Alert type="error" closable="closable" show-icon="show-icon" style="display:none">错误提示文案</Alert>
					<Form-item prop="loginName">
						<i-input v-model="user.loginName" size="large" placeholder="登录名">
							<Icon type="person" slot="prepend"></Icon>
						</i-input>
					</Form-item>
					<Form-item prop="password">
						<i-input type="password" v-model="user.password" size="large" placeholder="密码">
							<Icon type="locked" slot="prepend"></Icon>
						</i-input>
					</Form-item>
					<Form-item>
						<i-button type="success" v-on:click="submitLogin" size="large" long="long" icon="compose">登录</i-button>
					</Form-item>
				</i-form>
			</Card>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>
		<script th:src="@{/js/vue-resource.js}"></script>
		<script type="application/javascript">
			var loginData = {
				user: {
					loginName: "",
					password: "",
					captcha: ""
				},
				formLogin: {
					loginName: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ]
                }
			};
			var loginContainer = new Vue({
				el: '#login-container',
				data: function() {
					return loginData;
				},
				methods: {
					toRegister: function() {
						location.href = "register.html";
					},
					submitLogin: function() {
						var vm = this;
						vm.$refs['formLogin'].validate((valid) => {
							if(valid){
								vm.$http.post("login", JSON.stringify(vm.user)).then((response) => {
									var res = response.data;
									if(res.success) {
										vm.$Message.success("登录成功", 1.5, function(){
											location.href = "/erp/index";
										});
									} else {
										vm.$Message.error(res.errorMsg);
									}
								}, function(err) {});
							}
		                })
					}
				}
			});
		</script>
	</body>

</html>